<!--  -->
<template>
  <div class="dialogM">
    <el-dialog title="SSL" :visible.sync="dialogFormVisible" @closed="close" :close-on-click-modal="false" width="800px">
      <el-form v-loading="loading" :model="form" prop="domainId">
        <el-form-item label="网站域名" :label-width="formLabelWidth" class="requireStar" >
          <el-select :disabled="disabled" size="medium" v-model="form.domainId" placeholder="请选择域名" style="width:400px;">
            <el-option v-for="(item, index) in domains" :key="index" :label="item.domainName" :value="item.id">
             </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="KEY" :label-width="formLabelWidth" prop="resourcePrivatekeyId" class="requireStar">
          <el-button type="info" size="small" @click.stop="choosefilekey">选择KEY</el-button>
          <span class="s-p">请上传 *.key 格式文件</span>
          <div v-if="filekey && filekey.id">
            <div class="dffr">
              <div class="file-image-icon">
                <img :src="require('@/assets/images/icon_suffix/'+filekey.suffix+'.png')" alt="file-icon"
                  style="max-width:40px;max-height:40px;">
              </div>
              <div class="file-name black">
                {{filekey.originalFilename}}
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="证书" :label-width="formLabelWidth" prop="resourceCertificateId" class="requireStar">
          <el-button type="info" size="small" @click.stop="choosefilecrt">选择证书</el-button>
          <span class="s-p">请上传 *.crt 或 *.pem 格式文件</span>
          <div v-if="filecrt && filecrt.id">
            <div class="dffr">
              <div class="file-image-icon">
                <img :src="require('@/assets/images/icon_suffix/'+filecrt.suffix+'.png')" alt="file-icon"
                  style="max-width:40px;max-height:40px;">
              </div>
              <div class="file-name black">
                {{filecrt.originalFilename}}
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>
<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  props: {
    resetData: {
      type: Function
    },
    domainSSLData: {
      type: Array
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      loading: false,
      disabled: false,
      form: {},
      domains: [],
      filekey: {},
      filecrt: {}
    }
  },
  created () {
  },
  watch: {
  },
  methods: {
    choosefilekey () {
      this.$refs['chooseRepertory'].show({ title: '选择SSL的KEY资源文件', where: { type: [6] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          if (repertory.suffix !== 'key') {
            this.$message.error('请选择.key后缀的KEY文件！')
            return
          }
          let file = {
            id: repertory.id,
            originalFilename: repertory.originalFilename,
            suffix: repertory.suffix
          }
          this.form.resourcePrivatekeyId = repertory.id
          this.filekey = file
        }
      })
    },
    choosefilecrt () {
      this.$refs['chooseRepertory'].show({ title: '选择SSL的KEY资源文件', where: { type: [6] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          if (repertory.suffix !== 'crt' && repertory.suffix !== 'pem') {
            this.$message.error('请选择.crt或.pem后缀的证书文件！')
            return
          }
          let file = {
            id: repertory.id,
            originalFilename: repertory.originalFilename,
            suffix: repertory.suffix
          }
          this.form.resourceCertificateId = repertory.id
          this.filecrt = file
        }
      })
    },
    close () {
      this.dialogFormVisible = false
      this.loading = false
      this.disabled = false
      this.form = {}
      this.domains = []
      this.filekey = {}
      this.filecrt = {}
    },
    show (data) {
      this.loading = true
      if (parseInt(data.domainId) === 0) {
        // 获取域名列表数据
        this.$post('/domain/bind-infos-list', null).then(response => {
          if (!response || response.length < 1) {
            this.$message.warning('未绑定域名')
            this.dialogFormVisible = false
            return
          }
          this.dialogFormVisible = true
          this.domains = initDomains(response, this.domainSSLData)
          this.loading = false
        })
      } else if (parseInt(data.domainId) > 0) {
        this.disabled = true
        // 获取域名列表数据
        this.$post('/domain/bind-infos-list', null).then(response => {
          if (response) {
            this.domains = response
          }
        })
        // 获取域名列表数据
        this.$post('/domain/info-ssl', {domainId: data.domainId}).then(response => {
          if (response) {
            this.dialogFormVisible = true
            if (response.domain && response.domain.id) {
              this.form.domainId = response.domain.id
            }
            if (response.privatekey && response.privatekey.id) {
              this.form.resourcePrivatekeyId = response.privatekey.id
              let filekey = {
                id: response.privatekey.id,
                originalFilename: response.privatekey.originalFilename,
                suffix: response.privatekey.suffix
              }
              this.filekey = filekey
            }
            if (response.certificate && response.certificate.id) {
              this.form.resourceCertificateId = response.certificate.id
              let filecrt = {
                id: response.certificate.id,
                originalFilename: response.certificate.originalFilename,
                suffix: response.certificate.suffix
              }
              this.filecrt = filecrt
            }
            this.loading = false
          }
        })
      }
    },
    submit () {
      if (!this.form.domainId) {
        this.$message.error('请选择绑定域名！')
        return
      }
      if (!this.form.resourcePrivatekeyId) {
        this.$message.error('请上传KEY文件！')
        return
      }
      if (!this.form.resourceCertificateId) {
        this.$message.error('请上传证书文件！')
        return
      }
      let param = {
        domainId: this.form.domainId,
        resourcePrivatekeyId: this.form.resourcePrivatekeyId,
        resourceCertificateId: this.form.resourceCertificateId
      }
      this.$post('/domain/bind-ssl', param).then(response => {
        if (response) {
          this.dialogFormVisible = false
          this.resetData()
        }
      })
    }
  },
  components: {
    ChooseRepertory
  }
}
function initDomains (dataDomain, ssldata) {
  let domainFilter = dataDomain.filter(item => {
    let ishas = false
    for (let i = 0; i < ssldata.length; i++) {
      if (item.id === ssldata[i].domain.id) {
        ishas = true
      }
    }
    if (!ishas) {
      return item
    }
  })
  return domainFilter
}
</script>

<style scoped lang="scss">
.s-p{margin-left:10px; font-size: 13px;}
.dialogM /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.dffr{
  margin-top: 5px;
  line-height: 1.3;
  }
.file-name{
  margin-left: 10px;
  margin-top:8px;
  line-height: 2;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
